<template>
  <!-- 用户页面 -->
  <div>
    <!-- 面包屑导航区 -->
    <myBreadcrumb :breadcrumbData="this.breadcrumbData"></myBreadcrumb>
    <!-- 卡片视图区域 -->
    <el-card shadow="always" :body-style="{ padding: '10px' }">
      <div class="mask">
        <el-row :gutter="20">
          <el-col :span="8">
            <mySearch
              :searchType="this.searchType"
              :handleSearchSelectInputChange="
                this.handleSearchSelectInputChange
              "
              :searchTypeOptions="this.searchTypeOptions"
              :searchTypePlaceholder="this.searchTypePlaceholder"
              :searchInputKey="this.searchInputKey"
              :searchInputChange="this.searchInputChange"
            ></mySearch>
          </el-col>
        </el-row>
        <el-container style="height: 100%">
          <el-table :data="achievementList" stripe style="width: 100%">
            <el-table-column type="index" label="#" width="40">
            </el-table-column>
            <el-table-column
              prop="achievementName"
              label="业绩名称"
              width="180"
              sortable
            >
            </el-table-column>
            <el-table-column
              prop="achievementType"
              width="100"
              label="业绩类别"
              sortable
            >
            </el-table-column>
            <el-table-column prop="author" label="用户名称" sortable>
            </el-table-column>
            <el-table-column prop="college" label="所属学院" sortable>
            </el-table-column>
            <el-table-column
              prop="subject_classification"
              label="学科分类"
              sortable
            >
            </el-table-column>
            <el-table-column
              prop="budget"
              label="预算资金"
              width="120"
              sortable
            >
            </el-table-column>
          </el-table>
          <el-footer height="60px">
            <myPagination
              :sizeChange="sizeChange"
              :currentChange="currentChange"
              :queryInfo="queryInfo"
              :total="total"
            ></myPagination>
          </el-footer>
        </el-container>
      </div>
    </el-card>

    <!-- 操作弹窗 -->
    <el-dialog
      title="用户列表信息修改"
      :visible.sync="userMsgEditDialogVisible"
      width="30%"
      center
    >
      <span>
        <el-form
          :model="userMsgEditForm"
          :rules="userMsgEditFormRules"
          ref="userMsgEditFormRef"
          label-width="100px"
        >
          <el-form-item label="用户姓名 :" prop="username">
            <el-input v-model="userMsgEditForm.username"></el-input>
          </el-form-item>
          <el-form-item label="活动区域 :" prop="region">
            <el-select
              v-model="userMsgEditForm.college"
              placeholder="请选择学院单位 :"
            >
              <el-option
                v-for="item in collegeList"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户职位 :" prop="position">
            <el-input v-model="userMsgEditForm.position"></el-input>
          </el-form-item>
          <el-form-item label="用户身份 :" prop="admin">
            <el-switch
              v-model="userMsgEditForm.admin"
              active-text="管理者"
              inactive-text="普通用户"
            >
            </el-switch>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userMsgEditDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUserMsgEditFormConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import myBreadcrumb from "../../components/myBreadcrumb.vue";
import myPagination from "../../components/myPagination.vue";
import mySearch from "../../components/mySearch.vue";
import { mapState } from "vuex";
export default {
  name: "myUsersList",
  components: {
    myBreadcrumb,
    myPagination,
    mySearch,
  },
  data() {
    return {
      // 获取用户列表的参数对象
      queryInfo: {
        query: "",
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 10,
      },
      achievementList: [],
      // 总人数
      total: 0,
      breadcrumbData: ["业绩管理", "业绩列表"],
      // 搜索placeholder
      searchType: "achievementName",
      searchInputKey: "",
      searchTypePlaceholder: "搜索业绩名称",
      searchTypeOptions: [
        {
          value: "achievementName",
          label: "业绩名称",
        },
        {
          value: "achievementType",
          label: "业绩类别",
        },
        {
          value: "college",
          label: "学院单位",
        },
        {
          value: "subject_classificationVal",
          label: "学科分类",
        },
        {
          value: "author",
          label: "作者",
        },
      ],
      // 操作
      userMsgEditDialogVisible: false,
      userMsgEditForm: {},
      userMsgEditFormRules: {
        username: [
          { required: true, message: "请输入用户姓名", trigger: "blur" },
        ],
        position: [
          { required: true, message: "请输入用户职位", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    async getAchievementList() {
      this.achievementList = [];
      this.total = 0;
      this.$axios
        .get("admin/achievementList", {
          params: {
            queryInfo: this.queryInfo,
            searchType: this.searchType,
          },
        })
        .then(({ data: res }) => {
          if (res.status !== 200) {
            return this.$message.error("获取业绩列表列表失败");
          }
          // console.log(res.data);
          this.achievementList = res.data;
          this.total = parseInt(res.total);
          // console.log(this.achievementList);
        });
    },
    sizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.getAchievementList();
    },
    currentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      this.getAchievementList();
    },
    async userStateChange(data) {
      const { data: res } = await this.$axios.get(
        `users/${data.id}/state/${data.mg_state}`
      );
      console.log(res);
      if (res.meta.status !== 200) {
        data.mg_state = !data.mg_state;
        return this.$message.error("用户更新状态失败");
      }
      this.$message.success("用户更新状态成功");
    },
    handleSearchSelectInputChange(val) {
      try {
        this.searchTypeOptions.forEach((item) => {
          if (item.value == val) {
            this.searchTypePlaceholder = `搜索${item.label}`;
            this.searchType = item.value;
            throw new Error("");
          }
        });
      } catch (err) {}
    },
    async searchInputChange(val) {
      this.searchInputKey = "";
      this.searchInputKey += val;
      this.queryInfo.query = this.searchInputKey.trim();
      this.getAchievementList();
    },
    // 操作
    handleControlBtnClick(row) {
      this.userMsgEditDialogVisible = !this.userMsgEditDialogVisible;
      this.userMsgEditForm = row;
    },
    handleUserMsgEditFormConfirm() {
      this.$refs.userMsgEditFormRef.validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$axios.post("/admin/users/edit", {
          userMsgEditForm: this.userMsgEditForm,
        });
        console.log(res);
        if (res.status !== 200) {
          return this.$message.error("修改失败");
        }
        this.$message.success("修改成功");
        this.userMsgEditDialogVisible = !this.userMsgEditDialogVisible;
      });
    },
  },
  mounted() {},
  computed: {
    ...mapState(["moreUserInfo", "collegeList"]),
  },
  created() {
    this.getAchievementList();
  },
  beforeDestroy() {},
};
</script>

<style lang="less" scoped>
.searchBox {
  display: flex;
  width: 100%;
}
.mask {
  width: 100%;
  height: 86vh;
}
</style>
